<template>
  <div>
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="拼团信息"
      :ghost="false"
      @back="() => $router.go(-1)"
    >
    </a-page-header>
    <page-header-wrapper>
      <div style="background: #fff; padding: 0 30px 20px; margin-bottom: 20px" class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="7" :sm="24">
              <a-form-item label="订单编号">
                <a-input allowClear placeholder="请输入订单编号" v-model="queryParam.order_no"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="7" :sm="24">
              <a-form-item label="商品名称">
                <a-input allowClear placeholder="用户昵称" v-model="queryParam.name"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="7" :sm="24">
              <a-form-item label="下单时间">
                <a-range-picker
                  format="YYYY-MM-DD HH:mm"
                  valueFormat="YYYY-MM-DD HH:mm"
                  :placeholder="['开始时间', '结束时间']"
                  v-model="queryTime"
                  @change="changeTime"
                />
              </a-form-item>
            </a-col>
            <a-col :md="3" :sm="24">
              <a-form-item label="">
                <a-button type="primary" @click="getList(1)">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <a-card :border="false">
        <a-table
          :rowKey="
            (r, i) => {
              return r.id
            }
          "
          size="default"
          :dataSource="tabList"
          :pagination="{
            total: this.total,
            showSizeChanger: false,
            onChange: this.getList,
          }"
          :columns="columns"
          :scroll="{ x: 'max-content' }"
        >
          <div slot="userInfo" slot-scope="item" class="flex">
            <a-avatar :src="item.avatar" shape="square" :size="64" />
            <div class="flex-w-1" style="margin-left: 10px">
              <div class="text-more-2">{{ item.name }}</div>
            </div>
          </div>
          <div slot="goodsInfo" slot-scope="item" class="flex">
            <a-avatar :src="item.pic" shape="square" :size="64" />
            <div style="margin-left: 10px" class="flex-w-1">
              <div class="text-more-1">{{ item.goods_name }}</div>
              <div class="text-more-1">
                <span v-for="(attr, i) in item.attr" :key="attr.attr_id">
                  {{ attr.attr_group_name }}：{{ attr.attr_name }}{{ i < item.attr.length - 1 ? '，' : '' }}
                </span>
              </div>
              <div>x{{ item.num }}</div>
            </div>
          </div>

          <div slot="status" slot-scope="status">
            <a-badge :color="getStatus(status)[1]" :text="getStatus(status)[0]" />
          </div>
          <div slot="is_pay_loser" slot-scope="item">
            <a-badge
              :color="item.is_pay_loser ? '#65C817' : '#ff0000'"
              :text="item.is_pay_loser ? '已退款' : '未退款'"
            />
          </div>
          <span slot="action" slot-scope="text, record">
            <a-button v-if="record.error_order === 1" type="link"
                      @click="toLoserHandle(record.id)">处理异常(退款)</a-button>
          </span>

          <!-- <a-card slot="expandedRowRender" slot-scope="item" :columns="goodsColumns">
          <a-row>
            <a-col :span="2">
              <a-avatar :src="item.pic" shape="square" :size="64" />
            </a-col>
            <a-col :span="18">
              <div class="text-more-2">商品名称： {{ item.goods_name }}</div>
              <div class="">
                商品规格：
                <span v-for="(attr, i) in item.attr" :key="attr.attr_id">
                  {{ attr.attr_group_name }}：{{ attr.attr_name }}{{ i < item.attr.length - 1 ? '，' : '' }}
                </span>
              </div>
            </a-col>
            <a-col :span="4">
              <div style="text-align: right">数量： x{{ item.num }}</div>
              <div style="text-align: right">金额： ￥{{ item.total_price }}</div>
            </a-col>
          </a-row>
        </a-card> -->
        </a-table>
      </a-card>
    </page-header-wrapper>
  </div>
</template>

<script>
const columns = [
  {
    width: 210,
    title: '订单ID',
    dataIndex: 'order_no'
  },
  {
    title: '用户信息',
    width: 200,
    scopedSlots: {
      customRender: 'userInfo'
    }
  },
  {
    title: '商品信息',
    scopedSlots: {
      customRender: 'goodsInfo'
    }
  },
  {
    title: '支付金额',
    width: 200,
    dataIndex: 'total_price'
  },

  {
    title: '发起时间',
    dataIndex: 'pay_time',
    width: 200,

    sorter: (a, b) => Number(new Date(a.pay_time)) - Number(new Date(b.pay_time))
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 140,
    filters: [
      { text: '进行中', value: 1 },
      { text: '已成功', value: 2 },
      { text: '已失败', value: 3 }
    ],
    onFilter: (value, record) => record.status == value,
    scopedSlots: {
      customRender: 'status'
    }
  },
  {
    title: '是否已退款',
    scopedSlots: { customRender: 'is_pay_loser' },
    width: 140
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' },
    width: 100
  }
]

import pt from '@/api/pt'

export default {
  components: {},
  data () {
    return {
      columns,
      tabList: [],
      pt_number: '',
      queryParam: {
        name: '',
        status: -1,
        start_time: '',
        end_time: '',
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      queryTime: []
    }
  },
  computed: {
    getStatus () {
      return (status) => {
        let text, color
        switch (String(status)) {
          case '3':
            text = '已失败'
            color = '#ff0000'
            break

          case '2':
            text = '已成功'
            color = '#65C817'
            break
          case '1':
            text = '进行中'
            color = '#1890FF'
            break
        }
        return [text, color]
      }
    }
  },
  created () {
    if (this.$route.query.pt_number) this.pt_number = this.$route.query.pt_number
    this.getList()
  },

  methods: {
    changeTime (e) {
      console.log(e)
      if (e.length) {
        this.queryParam.start_time = e[0]
        this.queryParam.end_time = e[1]
      } else {
        this.queryParam.start_time = ''
        this.queryParam.end_time = ''
      }
    },
    async getList (pageNo) {
      pageNo && (this.queryParam.pageNo = pageNo)
      const res = await pt.ptGetPtInfo(Object.assign(this.queryParam, { pt_number: this.pt_number }))
      this.tabList = res.data.data
      this.total = res.data.totalCount
    },

    toOrderDetail (item) {
      console.log(item)
    },

    async toLoserHandle (pt_number) {
      const res = await pt.loserHandle({ pt_number: pt_number })
      if (res.code == 0) {
        this.$message.success(res.msg)
        this.getList()
      } else {
        this.$error({
          content: res.msg
        })
      }
    }
  }
}
</script>

<style></style>
